Sviluppare applicazioni web con AngularJS e Bootstrap by Radford Stephen

autore:Radford, Stephen
La lingua: ita
Format: epub
ISBN: 978-88-503-1748-6
editore: Feltrinelli Editore
pubblicato: 2015-09-21T04:00:00+00:00

Installare AngularStrap

Innanzitutto dobbiamo scaricare AngularStrap. Potete procurarvelo dal sito http://mgcrea.github.io/angular-strap/. Fate clic sul pulsante di download in alto a destra e scaricate l’ultima versione come file ZIP.

Quest’ultimo contiene, tra l’altro, tutti i moduli singoli sotto forma di un comodo file minificato. Troverete i due file che ci servono nella directory dist. Copiate angular-strap.min.js e angular-strap.tpl.min.js nella directory js del progetto. Includeteli nel file index.html della radice dopo Angular e prima del modulo del progetto:

<script type=”text/javascript” src=”/assets/js/angular-

strap.min.js”></script>

<script type=”text/javascript” src=”/assets/js/angular-

strap.tpl.min.js”></script>

Come per ogni altro modulo, è necessario inserirlo nell’applicazione. La dichiarazione è situata nella prima riga del controller.js; il nome del modulo AngularStrap è mgcrea.ngStrap. Di seguito abbiamo aggiunto AngularStrap come una dipendenza del modulo contactsMgr:

angular.module(‘contactsMgr’, [‘ngRoute’, ‘ngSanitize’,

‘mgcrea.ngStrap’])

Ma non è finita qui. AngularStrap dipende dal modulo ngAnimate che dobbiamo ancora includere nel progetto. Lo possiamo scaricare facendo clic sul link Extras nella finestra modale di download all’indirizzo https://angularjs.org/.

Aggiungete la versione minificata alla directory js del progetto e includetela prima di AngularStrap:

<script type=”text/javascript” src=”/assets/js/angular-

animate.min.js”></script>

Il modulo ngAnimate non deve essere inserito nel progetto a meno che non vogliate usarlo al di fuori delle direttive di Bootstrap. Consente di sfruttare le animazioni CSS in moduli come ngShow e ngHide per ottenere un effetto di transizione invece di visualizzare semplicemente qualcosa.

Potremmo anche sviluppare delle animazioni da utilizzare insieme con AngularStrap, anche se AngularMotion è il suo compagno perfetto. Si tratta di un semplice foglio di stile che contiene animazioni predefinite pronte da utilizzare con il modulo ngAnimate.

Possiamo scaricare l’ultima versione dal sito http://mgcrea.github.io/angular-motion/ facendo clic sul pulsante di download in alto a destra. Anche questo file ZIP contiene i file sorgente oltre alla versione minificata pronta per la produzione, presente nella directory dist. Copiatela nel progetto e includetela nella pagina come foglio di stile secondario:

<link rel=”stylesheet” href=”/assets/css/angular-motion.min.css”>

Ora potremo creare effetti di transizione, far scorrere, ridimensionare e ruotare le animazioni fornite da AngularMotion insieme con le direttive AngularStrap.

Forse vi sembrerà strano che non sia necessario includere lo script dei plug-in di Bootstrap. C’è un motivo: le direttive che abbiamo incluso con AngularStrap non sono semplici funzioni wrapper che eseguono jQuery, ma riscritture complete che sfruttano appieno Angular.

scaricare

Disconoscimento:
Questo sito non memorizza alcun file sul suo server. Abbiamo solo indice e link                                                  contenuto fornito da altri siti. Contatta i fornitori di contenuti per rimuovere eventuali contenuti di copyright e inviaci un'email. Cancelleremo immediatamente i collegamenti o il contenuto pertinenti.